<template>
  <div>
    <div class="returnTitle">
      <el-page-header @back="goBack" content="新增测评计划"></el-page-header>
    </div>
    <div class="center">
      <el-form ref="form" :model="form" label-width="140px" label-position="right">
        <el-form-item label="测评计划名称：" class="inputBox">
          <el-input v-model="form.title" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="对学生展示的名称：" class="inputBox">
          <el-input v-model="form.student_title" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="指导说明：" class="inputBox">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" maxlength="50" show-word-limit v-model="form.guidance_note"> </el-input>
          <p>开始测评前，展示给参与测评的人</p>
        </el-form-item>
        <el-form-item label="测评量表：">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="isAddMeasurementPlan = true">添加量表</el-button>
          <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="getOperation"></simple-table>
        </el-form-item>
        <el-form-item label="开始时间：" class="inputBox">
          <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
          <p>开始测评前，展示给参与测评的人</p>
        </el-form-item>
        <el-form-item label="结束时间：" class="inputBox">
          <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
        </el-form-item>
        <el-form-item class="inputBox">
          <el-button type="primary" @click="check()">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <add-measurement-plan v-if="isAddMeasurementPlan" :isAddMeasurementPlan="this.isAddMeasurementPlan" @noAddMeasurementPlan="noAddMeasurementPlan"></add-measurement-plan>
  </div>
</template>
<script>
import simpleTable from '@/components/simpleTable.vue'
import addMeasurementPlan from './measurementPlan/addMeasurementPlan.vue'
import {APIADDPLANSLIST} from '@/common/api.js'
export default {
  components: {
    addMeasurementPlan,
    simpleTable
  },
  data () {
    return {
      isAddMeasurementPlan: false,
      form: {
        title: '',
        student_title: '',
        guidance_note: '',
        start_time: '',
        end_time: '',
        public_ids: '',
        plan_type: ''
      },
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:80%', // 表格宽度
        align: 'center',
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'student_title', name: '名称'},
          {id: 'topics_num', name: '题量'},
          {id: 'count', name: '时长'},
          {id: 'operation', name: '操作', list: [{id: 'up', name: '上移'}, {id: 'down', name: '下移'}, {id: 'del', name: '删除', className: 'dangerTextBtn'}]}
        ]
      },
      tableData: []
    }
  },
  methods: {
    getOperation (e) {
      if (e.id === 'up') {
        if (e.id === 0) {
          return
        }
        // 在上一项插入该项
        this.tableData.splice(e.index - 1, 0, (this.tableData[e.index]))
        // 删除后一项
        this.tableData.splice(e.index + 1, 1)
      } else if (e.id === 'down') {
        if (e.index === (this.tableData.length - 1)) {
          return
        }
        // 在下一项插入该项
        this.tableData.splice(e.index + 2, 0, (this.tableData[e.index]))
        // 删除前一项
        this.tableData.splice(e.index, 1)
      } else if (e.id === 'del') {
        this.tableData.splice(e.index, 1)
      }
    },
    handleClose (done) {
      done()
    },
    noAddMeasurementPlan (val, id) {
      this.isAddMeasurementPlan = false
      this.tableData = val
      this.form.plan_type = id
    },
    check () {
      if (this.form.title === '') {
        this.$message.warning('测评计划名称不能为空')
        return false
      }
      if (this.form.student_title === '') {
        this.$message.warning('对学生展示的名称不能为空')
        return false
      }
      if (this.form.guidance_note === '') {
        this.$message.warning('指导说明不能为空')
        return false
      }
      if (this.tableData.length <= 0) {
        this.$message.warning('请添加测评量表')
        return false
      }
      if (this.form.start_time === '') {
        this.$message.warning('开始时间不能为空')
        return false
      }
      if (this.form.end_time === '') {
        this.$message.warning('结束时间不能为空')
        return false
      }
      this.close()
    },
    close () {
      var arr = []
      this.tableData.forEach(item => {
        arr.push(item.id)
      })
      this.form.public_ids = arr.toString()
      APIADDPLANSLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.$router.push({path: './measurementPlan'})
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goBack () {
      this.$router.push({path: './measurementPlan'})
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'src/assets/style/varibles.scss';
.inputBox{
  width: 40vw;
  p{
    color: $secondaryFontColor;
    font-size: $promptSize;
  }
}
</style>
